<template>
  <div>
    <div>实时报警信息</div>
    <div ref="target" class="w-full h-full">
      <el-table
        :data="tableData"
        height="600"
        style="width: 100%"
        :header-cell-style="getHeaderCellStyle"
        :cell-style="getRowCellStyle"
      >
        <el-table-column prop="CreatedAt" label="时间" width="180" />
        <el-table-column prop="machine_name" label="客户" width="180" />
        <el-table-column prop="warn_msg" label="报警内容" />
      </el-table>
    </div>
  </div>
</template>
  
  <script setup>
const props = defineProps({
  data: {
    type: Array,
    required: true,
  },
});
import { ref, onMounted, watch } from "vue";
import { ElTable, ElTableColumn } from "element-plus";

const tableData = ref();

onMounted(() => {
  // console.log("初始化");
});
watch(
  () => props.data,
  (newVal) => {
    // console.log("接收到的新值:", newVal);
    
    if (Array.isArray(newVal)) {
      // 如果 newValue 是数组，则进行处理
      const formattedData = newVal.map((item) => ({
        CreatedAt: new Date(item.CreatedAt).toLocaleString(),
        machine_name: item.machine_name,
        warn_msg: item.warn_msg,
      }));
      tableData.value = formattedData;
    } else {
      console.error("传递给子组件的数据不是数组:", newVal);
    }
  },
  { deep: true }
);

function getHeaderCellStyle() {
  return {
    background: "#182434", 
    color: "fff", 
    "text-align": "left", 
    border: "none",
  };
}
// 定义行单元格样式
function getRowCellStyle({ row, rowIndex }) {
  return {
    background: rowIndex % 2 === 0 ? "#182441" : "#182434", // 偶数行和奇数行不同的背景色
    color: "#e8e9eb", // 设置行文本颜色
  };
}
</script>

<style scoped>
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}
/* 调整表格的内边距 */
.el-table th,
.el-table td {
  padding: 10px;
}
</style>